<template>
    <div class="vHistoricaltracing_a">
        <!-- 历史追溯 -->
        <span @click="close">×</span>
        <div class="time">
            <p>
                <b>选择相机</b>
                <b>选择开始日期</b>
                <b>选择开始时间</b>
                <b>选择结束时间</b>
            </p>
            <select @change="selectCamera" v-model="selectCameraData">
                <!-- <option value="请选择相机" >请选择相机</option> -->
                <option :value="item.uid" v-for="item in selectCameralist" :key="item.id">{{ item.title }}</option>
                <!-- <option value="2">相机2</option> -->
            </select>
            <!-- <b>选择开始时间</b> -->
            <input type="date" ref="dateRef" @change="selectDate" class="data">
            <input type="time" ref="startRef" @change="startDate" class="times">
            <input type="time" ref="endRef" @change="endDate" style="margin-left: .625rem;" class="times">
            <button style="margin-left: .375rem;" @click="changePlay">开始播放</button>
            <button @click="stopPlaylszs">结束播放</button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import kang from "../common/mitt.js"
import { reactive, ref } from 'vue'
// const props = defineProps(["isShow"]);
const emits = defineEmits(['retrospection'])
import flvjs from 'flv.js'
let selectCameraData = ref('')
let dateRef = ref()
let startRef = ref()
let endRef = ref()
let selectCameralist = reactive([
    {
        id: 0,
        title: '北停车场',
        uid: '0'
    },
    {
        id: 1,
        title: '滨湖大道桥',
        uid: '1'
    },
    {
        id: 2,
        title: '滨湖大道中',
        uid: '2'
    },
    {
        id: 3,
        title: '滨湖路',
        uid: '3'
    },
    {
        id: 4,
        title: '滨湖路口',
        uid: '4'
    },
    {
        id: 5,
        title: '图书馆',
        uid: '5'
    },
    {
        id: 6,
        title: '西北停车场',
        uid: '6'
    },
    {
        id: 7,
        title: '熏华路中',
        uid: '7'
    },
    {
        id: 8,
        title: '昭亭南路南',
        uid: '8'
    }
])
import hlsjs from "hls.js";
import http from "axios"
let close = () => {
    // alert('关闭')
    kang.emit('vHistoricaltracing', false)
}
// 相机
let selectCamera = () => {
    // console.log(selectCameraData.value);
}
// 日期
let selectDate = (e: any) => {
    console.log(dateRef.value.value);
}
// 开始时间
let startDate = () => {
    console.log(startRef.value.value);
}
// 结束时间
let endDate = () => {
    console.log(endRef.value.value);
}
//开始播放
let changePlay = () => {
    if (selectCameraData.value == '') {
        alert('请选择相机')
        return
    }
    if (dateRef.value.value == '') {
        alert('请选择开始日期')
        return
    } else if (startRef.value.value == '') {
        alert('请选择开始时间')
        return
    } else if (endRef.value.value == '') {
        alert('请选择结束时间')
        return
    }
    console.log(selectCameraData.value);

    if (selectCameraData.value == "0") {
        // kang.emit('retrospection',0)
        // 北停车场
        ajax('34020000001110000001', '34020000001320000105')
        // emits('retrospection', 0)
        // alert(0)
    } else if (selectCameraData.value == "1") {
        ajax('34020000001110000001', '34020000001320000111')
        // alert(1)
    } else if (selectCameraData.value == "2") {
        ajax('34020000001110000001', '34020000001320000118')
        // alert(2)
        // emits('retrospection', 2)

    } else if (selectCameraData.value == "3") {
        ajax('34020000001110000001', '34020000001320000117')

        // alert(3)

    } else if (selectCameraData.value == "4") {
        ajax('34020000001110000001', '34020000001320000115')

        // alert(4)

    } else if (selectCameraData.value == "5") {
        ajax('34020000001110000001', '34020000001320000112')

        // alert(5)

    } else if (selectCameraData.value == "6") {
        // alert(6)
        ajax('34020000001110000001', '34020000001320000113')


    } else if (selectCameraData.value == "7") {
        // alert(7)
        ajax('34020000001110000001', '34020000001320000116')


    } else if (selectCameraData.value == "8") {
        // alert(8)
        ajax('34020000001110000001', '34020000001320000114')

    }
}
// 结束播放
const stopPlaylszs = () => {
    kang.emit('stopStoplszs')
}
// 历史追溯
let ajax = (deviceId: any, channelId: any) => {
    http({
        method: "get",
        url: `/api/user/login`,
        params: {
            username: "admin",
            password: "6aa6e7d0dba1b0b3e7d83ee44d5d255b",
        },
        baseURL: "api",
    })
        .then((response) => {
            console.log("登录成功", response);
        })
        .catch((error) => {
            console.log("登录失败", error);
        });
    console.log(dateRef.value.value + " " + startRef.value.value + ':00', dateRef.value.value + " " + endRef.value.value + ':00', deviceId, channelId);
    setTimeout(() => {
        http({
            method: "get",
            url: `/api/playback/start/${deviceId}/${channelId}`,
            // url: `/api/playback/start/34020000001110000001/34020000001320000103`,
            params: {
                startTime: dateRef.value.value + " " + startRef.value.value + ':00',
                endTime: dateRef.value.value + " " + endRef.value.value + ':00',
            },
            baseURL: "/api",
        })
            .then((response) => {
                console.log("历史视频成功", response.data)
                setTimeout(() => {
                    emits('retrospection', { a: selectCameraData.value, b: response.data.flv })
                }, 300)
            })
            .catch((error) => {
                console.log("历史视频失败", error);
            });
    }, 600)

};
</script>
<style scoped>
.vHistoricaltracing_a {
    width: 100%;
    height: 60%;
    background-color: rgb(119, 118, 118);
    border-radius: .3125rem;
    border: 2px solid transparent;
    padding: 20px;
    position: relative;
    top: 600px;
    /* bottom: 1px; */
    overflow: hidden;
    transition: all 0.3s ease-in-out;

}

.vHistoricaltracing_a:hover {
    border: 2px solid #14eeee;
}

.vHistoricaltracing_a span {
    cursor: pointer;
    font-size: .225rem;
    position: absolute;
    top: .125rem;
    right: .125rem;
}

.vHistoricaltracing_a p {
    background-color: #777777;
}

.vHistoricaltracing_a .time {
    width: 100%;
    height: 13%;
    background-color: rgb(175, 173, 173);
}

.vHistoricaltracing_a select {
    margin: .125rem .25rem;
    width: 1.5rem;
    height: .6rem;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 5px;
    border: none;
    background: #fff;
    padding: 10px;
}

.vHistoricaltracing_a option {
    width: 1.5rem;
    height: .5rem;
    line-height: 20px;
    font-size: .25rem;
}

.vHistoricaltracing_a .data {
    display: inline-block;
    width: 2.3rem;
    height: .45rem;
    /* line-height: 50px; */
    text-align: center;
    border-radius: 10px;
    border: 2px solid transparent;
    vertical-align: middle;
    /* 边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /* 阴影 */
    background-color: white;
    color: #000;
    font-size: .25rem;
}

.vHistoricaltracing_a .times {
    display: inline-block;
    width: 1.2rem;
    height: .45rem;
    vertical-align: middle;
    margin-left: .25rem;
    /* line-height: 50px; */
    text-align: center;
    border-radius: 10px;
    border: 2px solid transparent;
    /* 边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /* 阴影 */
    background-color: white;
    color: #000;
    font-size: .25rem;
}

.vHistoricaltracing_a p b:nth-child(1) {
    font-size: .2rem;
    padding-left: .25rem;

}

.vHistoricaltracing_a p b:nth-child(2) {
    font-size: .2rem;
    padding-left: 1rem;
}

.vHistoricaltracing_a p b:nth-child(3) {
    font-size: .2rem;
    padding-left: 1.06rem;
}

.vHistoricaltracing_a p b:nth-child(4) {
    font-size: .2rem;
    padding-left: .46rem;
}

.vHistoricaltracing_a button {
    cursor: pointer;
    margin: 0 .125rem;
    width: 1rem;
    height: .5rem;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 5px;
    border: none;
    background: #fff;
}

.vHistoricaltracing_a button:hover {
    background: #e4b654;

}
</style>